<template>
	<view class="box" id="app">
		<view class="b-top">
			<view class="cu-form-group">
				<image class="icon-i" src="../../static/1.png" />
				<input v-model="selectData" maxlength="18" placeholder="手机号/身份证查询"></input>
				<button class='cu-btn button-t shadow' @click="cllickQuery">
					查询
				</button>
			</view>
		</view>
		<view class="b-top1">
			<view class="cu-form-group" v-if="codeStatus">
				<image class="icon-i" src="../../static/2.png" />
				<input placeholder="请输入验证码" v-model="code"></input>
				<button class='cu-btn button-t shadow' @click="clickGetCode" :disabled="!isActive">
					验证码
					<view v-show="!isActive" style="margin-left: 1vw;">{{count}}</view>
				</button>
			</view>
		</view>

		<view v-if="show == true">

			<view v-for="(item,index) in dataList" :key="index" style="margin-bottom:3vh">
				<!-- 报告单 -->
				<view class="b-cent">
					<view class="b-cent-title" :style="index != 0 ? 'color:#265FF4':'color:#FFFFFF'">
						项目：{{item.experimentCodeName}}
					</view>
					<view class="b-cent-c">
						<view class="top-title">
							——<span style="margin: 0 4px;">{{item.reportHospitalName}}</span>——
						</view>
						<!-- 标题 -->
						<view class="b-c-c-title">
							{{item.title}}
						</view>
						<!-- 列表1 -->
						<view class="b-c-c-list">
							<span v-if="item.bloodNum">
								采血卡号：{{item.bloodNum}}
							</span>
							<span v-else>
								采血条码：{{item.barCode}}
							</span>
							<span>
								出生医院：{{item.hospitalName}}
							</span>
							<span>
								筛查编号：{{item.expNum}}
							</span>
						</view>
						<!-- 列表2 -->
						<view class="b-c-c-list list2">
							<span>
								母亲姓名：{{item.monName}}
							</span>
							<span>
								性别：{{item.babySex}}
							</span>
							<span>
								出生日期：{{item.birthTime.substr(0, 10)}}
							</span>
							<span>
								手机：{{item.phone}}
							</span>
							<span>
								报告日期：{{item.reportDate.substr(0,10)}}
							</span>
							<span>
								实验结论：{{item.experimentResult}}
							</span>
						</view>
						<!-- 表格 -->
						<table class="table">
							<thead>
								<tr class="table-title">
									<th style="border-top-left-radius: 10px;">筛查项目</th>
									<th>检测值</th>
									<th>正常参考值</th>
									<th style="border-top-right-radius: 10px;">筛查结果</th>
								</tr>
							</thead>
							<tbody class="table-center-box">
								<tr class="table-content" v-for="(items,indexs) in item.experimentValue" :key="indexs">
									<td>{{items.indicatorCodeName}}</td>
									<td>{{items.experimentValue}}</td>
									<td>{{items.referenceValue}}</td>
									<td>{{items.hint}}</td>
								</tr>
							</tbody>
						</table>
						<view class="table-foot">
							本次检测结果只对该筛查编号标本负责
						</view>
						<!-- 签名 -->
						<view class="b-c-c-list" style="margin-top:1.4vh">
							<span>
								检测者(签)：{{item.experimentMan}}
							</span>
							<span>
								审核者(签)：{{item.checkMan}}
							</span>
							<span class="address">
								联系地址：{{item.reportHospitalAddress}}
							</span>
							<span class="address">
								联系电话：{{item.reportHospitalPhone}}
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="none">
			<image src="../../static/error.png" style="width: 35vw;height: 18vh;"></image>
			<view style="color:#265FF4;margin-top: 3vh;">
				{{nullText}}
			</view>
		</view>

	</view>
</template>

<script>
	import axios from 'axios';
	import {
		query
	} from '@/api/index.js'

	export default {
		data() {
			return {
				selectData: '',
				show: true,
				loading: true,
				dataList: [],
				code: '',
				nullText: '1111', //报错提示
				codeStatus: false,
				isActive: true,
				count: 0,
				timer: null,
				time: 120,
				codeClickTime: this.time,
			}
		},
		onLoad() {

		},
		// 监听导航按钮(如果是左边就返回上一页)
		onNavigationBarButtonTap(e) {
			if (e.float == "left") {
				window.history.back(-1);
			}
		},
		methods: {
			// 点击查询
			cllickQuery() {
				if (this.selectData == '' || this.selectData.length < 11) {
					uni.showToast({
						title: '请输入手机号或者身份证号进行查询！',
						type: 'error',
						icon: 'none'
					})
					return
				}
				if (this.selectData.length == 11) {
					if (!(/^1[3456789]\d{9}$/.test(this.selectData))) {
						uni.showToast({
							title: '手机号码有误，请重填！',
							type: 'error',
							icon: 'none'
						})
						return;
					}
				}
				if (this.selectData.length > 11 && this.selectData.length < 18) {
					uni.showToast({
						title: '身份证号填写有误，请重填！',
						type: 'error',
						icon: 'none'
					})
					return;
				}
				// 如果没问题,手机查询就展示输入验证码,身份证查询就查报告
				if (this.selectData.length == 11) {
					if (this.codeStatus) {
						if (this.code) {
							let url = `experimentReport/anno/phoneQueryReport?phone=${this.selectData}&code=${this.code}`
							this.getList(url)
						} else {
							uni.showToast({
								title: '请输入验证码！',
								type: 'error',
								icon: 'none'
							})
							return;
						}
					}
					this.codeStatus = true
					// /experimentReport/anno/phoneQueryReport
				} else if (this.selectData.length > 11) {
					let url = `experimentReport/anno/cardQueryReport?card=${this.selectData}`
					this.getList(url)
				}

			},
			// 身份证查询报告
			getList(url) {
				this.dataList = []
				let that = this;
				uni.request({
					url: `http://demo.aisclink.com/api/mp/${url}`, //测试
					// url: `http://jk.gdxybiotech.com/api/mp/${url}`, //正式
					header: {
						'Content-Type': 'application/json; charset=UTF-8',
						'Authorization': 'Basic enVpaG91X3VpOnp1aWhvdV91aV9zZWNyZXQ=',
						'tenant': 'eXVleWFuZw==', //岳阳
						// 'tenant': 'eWl5YW5n',//益阳
						// 'tenant': 'Y2hlbnpob3U=',//郴州
						// 'tenant': 'emh1emhvdQ==',//株洲
						// 'tenant': 'c2hhb3lhbmc=',//邵阳
						// 'tenant': 'aHVhaWh1YQ==',//怀化
						'userid': '1307946339199352832',
						'account': 'wxs',
						'name': 'wxs',
						'token': 'Bearer test',
						'Access-Control-Allow-Origin': '*'
					},
					method: 'GET',
					success(res) {
						if (res.data.data) {
							if (res.data.data.length > 0) {
								that.dataList = res.data.data
								that.show = true
							} else {
								that.show = false
								that.nullText = res.data.msg
							}
						} else {
							// uni.showToast({
							// 	title: res.data.msg,
							// 	type: 'error',
							// 	icon: 'none'
							// })
							that.show = false
							that.nullText = res.data.msg
						}
					},
					fail(res) {
						uni.showToast({
							title: res.errMsg + '糟糕服务器出问题了请联系管理员吧',
							type: 'error',
							icon: 'none'
						})
					}
				})
			},

			// 获取验证码
			clickGetCode() {
				if (!this.timer) {
					this.count = this.time;
					this.isActive = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= this.time) {
							this.count--;
						} else {
							this.isActive = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
					// 获取验证吗
					this.getCode()
				} else {
					uni.showToast({
						title: '请过一会再点哦~',
						type: 'error',
						icon: 'none'
					})
					return;
				}
			},
			// 获取验证码
			getCode() {
				let that = this;
				uni.request({
					url: `http://demo.aisclink.com/api/mp/experimentReport/anno/sendPhoneVerifyCode?phone=` + this.selectData, //测试
					// url: `http://jk.gdxybiotech.com/api/mp/experimentReport/anno/sendPhoneVerifyCode?phone=` + this.selectData, //正式
					header: {
						'Content-Type': 'application/json; charset=UTF-8',
						'Authorization': 'Basic enVpaG91X3VpOnp1aWhvdV91aV9zZWNyZXQ=',
						'tenant': 'eXVleWFuZw==', //岳阳
						// 'tenant': 'eWl5YW5n',//益阳
						// 'tenant': 'Y2hlbnpob3U=',//郴州
						// 'tenant': 'emh1emhvdQ==',//株洲
						// 'tenant': 'c2hhb3lhbmc=',//邵阳
						// 'tenant': 'aHVhaWh1YQ==',//怀化
						'userid': '1307946339199352832',
						'account': 'wxs',
						'name': 'wxs',
						'token': 'Bearer test',
						'Access-Control-Allow-Origin': '*'
					},
					method: 'GET',
					success(res) {
						if (res.data.data) {
							uni.showToast({
								title: res.data.msg,
								type: 'success',
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								type: 'error',
								icon: 'none'
							})
							that.show = false
						}
					},
					fail(res) {
						uni.showToast({
							title: res.errMsg + '糟糕服务器出问题了请联系管理员吧',
							type: 'error',
							icon: 'none'
						})
					}
				})
			},
			// 获取url参数
			getUrlKey(name) { //获取url 参数
				alert("location.href code = " + "=====" + location.href);
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[
					1].replace(/\+/g, '%20')) || null;
			},
		},
		watch: {
			selectData() {
				if (this.selectData == '') {
					this.show = true
					this.codeStatus = false
					this.isActive = true
					this.timer = null
					this.dataList = []
				}
				if (this.selectData > 11) {
					this.codeStatus = false
					this.isActive = true
					this.timer = null
				}
			}
		}
	}
</script>

<style>
	page,
	html,
	body {
		height: 100%;
		width: 100%;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: #F4F7FF;
	}

	.button-t {
		background-color: #007AFF;
		color: #fff;
	}

	.cu-form-group {
		border-radius: 3vw;
		width: 90%;
		min-height: 12vw;
	}

	.box {
		width: 100%;
		height: 100%;
		position: relative;
		background: url(../../static/wxBg.png) no-repeat;
		background-size: 100% 40%;
		overflow-y: auto;
	}

	.b-top {
		padding-top: 3.5vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-top1 {
		padding-top: 1.5vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-t-select {
		margin-left: 1.335vw;
		font-family: PingFang SC;
		padding-left: 2.7vw;
		font-size: 2.8vw;
		width: 77.3vw;
		height: 5vh;
		border-radius: 10px;
		border: 0;
		background: #fff
	}

	.b-t-select-text {
		font-size: 4.5vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40px;
		margin-left: 2.2735vw;
		display: flex;
	}

	.b-cent {}

	.top-title {
		color: #666;
		font-size: 3vw;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-cent-title {
		width: 100%;
		text-align: center;
		font-size: 3.5vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40px;
		margin-top: 1.8vh;
		margin-bottom: 2vh;
	}

	.b-cent-c {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #FFFFFF;
		box-shadow: 0px 7px 8px 0px rgba(215, 225, 249, 0.2);
		border-radius: 20px;
		margin: 0 2.6vw;
		padding: 2.3vh 3.6vw;
	}

	.b-c-c-title {
		font-size: 3.98vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: #4578FF;
		line-height: 40px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-c-c-list {
		margin-top: 1.6vh;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		line-height: 2;
	}

	.b-c-c-list span {
		width: 50%;
		font-size: 3vw;
	}

	.list2 {
		margin-top: 2.5vh;
	}

	.address {
		width: 100% !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.table {
		width: 100%;
		font-size: 3vw;
		text-align: center;
		border-radius: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		border-collapse: collapse;
		color: #473FB4;
		margin-top: 1.2vh;
	}

	.table-title {
		font-size: 2.6vw;
		height: 4vh;
		background: linear-gradient(0deg, #89ACFF 0%, #487AFF 100%);
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.table-title th {
		border-right: 1px #A7BDF3 solid !important;
	}

	.table-title th:last-child {
		border-right: 0px !important;
	}

	.icon-i {
		width: 5vw;
		height: 5vw;
		margin-right: 3vw;
	}

	.table-content td {
		border-right: 1px #A7BDF3 solid;
		font-size: 2.5vw;
		height: 3.6vh;
	}

	.table-title td:last-child {
		border-right: 0px !important;
	}

	.table-foot {
		height: 4vh;
		font-size: 2.6vw;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(0deg, #89ACFF 0%, #487AFF 100%);
		opacity: 0.7;
		border-radius: 0px 0px 10px 10px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.table-center-box tr:nth-child(even) {
		background: #A7BDF3;
		opacity: 0.7;
	}

	.none {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 50%;
	}
</style>
